<template>
    <el-card class="account-container">
        <el-form :model="formData" label-width="120px">
            <el-form-item label="收件人名称" >
                <el-input  v-model="orderRequest.name" />
            </el-form-item>
            <el-form-item label="订单状态" prop="level">
                <el-select v-model="orderRequest.status" placeholder="选择商品类型">
                    <el-option label="已完成" value="3" />
                    <el-option label="派送中" value="2" />
                    <el-option label="未付款" value="0" />
                    <el-option label="已退款" value="-1" />
                </el-select>
            </el-form-item>
            <el-form-item label="金额" >
                <el-input style="width:100px; margin-right: 10px" placeholder="最小金额" v-model="orderRequest.beginAmount" />
                <el-input style="width:100px; margin-right: 10px" placeholder="最大金额" v-model="orderRequest.endAmount" />
            </el-form-item>
            <el-form-item label="日期" >
                <el-date-picker
                        v-model="beginTime"
                        type="date"
                        placeholder="开始日期"
                        @change="beginDateChange"
                />
                <el-date-picker
                        v-model="endTime"
                        type="date"
                        placeholder="结束日期"
                        @change="endDateChange"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchOrderWith">查询</el-button>
            </el-form-item>
        </el-form>

        <div>
            <h1>全部订单</h1>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
            >
                <el-table-column :span="4" label="订单状态" width="100">
                    <template #default="props">
                        <el-tag  v-if="props.row.status>2"  effect="dark" type="success">已完成</el-tag>
                        <el-tag  v-if="props.row.status===2"  effect="dark" type="warning">派送中</el-tag>
                        <el-tag  v-if="props.row.status===1"  effect="dark" type="danger">待完成</el-tag>
                        <el-tag  v-if="props.row.status<0"  effect="dark" type="info">已退款</el-tag>
                        <el-tag  v-if="props.row.status===0"  effect="dark" type="primary">未付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="orderTime" label="下单时间" />
                <el-table-column prop="consignee" label="订购人" width="180" />
                <el-table-column prop="amount" label="总价" />
                <el-table-column prop="notes" label="备注" />
                <el-table-column label="Operations">
                    <template #default="props">
                        <el-button
                                type="primary"
                                @click="openDetail(props.row.id)"
                        >订单详情</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-row class="row-bg" justify="center">
                <el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="orderTotal" pageSize="10" @current-change="handleCurrentChange"/>
            </el-row>
            <el-dialog destroy-on-close v-model="dialogVisible" title="菜单详情" @close="()=>{arrDish.value=[]}">
                <el-row>
                    <el-col
                            v-for="(item,index) in arrDish"
                            :key="index"
                            :span="8"
                            :offset="2"
                    >
                        <el-card :body-style="{ padding: '0px' }">
                            <img
                                    :src=item.image
                                    class="image"
                            />
                            <div style="padding: 14px">
                                <div>{{item.dishName}}</div>
                                <span>单价:{{item.price}} </span>

                                <div class="bottom">
                                    <span>数量:{{item.number}}</span>
                                    <el-button text class="button">商品详情</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-dialog>
        </div>
    </el-card>
</template>

<script setup>
    import {useStore} from 'vuex'
    import {ref,reactive} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter()
    import axios from 'axios';
    const store=useStore()
    let tableData=ref();
    let input=ref();
    let hasNewOrder=false;
    let dialogVisible=ref(false);
    let arrDish=ref([]);
    let beginTime=ref();
    let endTime=ref();
    let orderTotal=ref()
    let pageNum=ref()
    const orderRequest = reactive({
        pageSize:10,
        pageNum:1,
        merchantId:null,
        name:null,
        status:null,
        beginAmount:null,
        endAmount:null,
        beginDate:null,
        endDate:null,
    })
    const searchOrderWith=()=>{
        axios.post("api/merchant/countOrdersWith",orderRequest).then(
            res=>{
                orderTotal.value=res.data.data
            }
        )
        orderRequest.pageNum=1
        orderRequest.pageSize=10
        axios.post("api/merchant/getOrderWith",orderRequest).then(
            res=>{
                tableData.value=res.data.data.list
            }
        )
    }
    const getMessage=()=>{
        const id=store.getters.getId
        axios.get('/api/merchant/getAllOrders',{
        })
            .then(response => {
                // 请求成功处理
                tableData.value=response.data.data;
                console.log(tableData.value)
            })
            .catch(error => {
                // 请求失败处理
                console.error(error);
            });
    }
    const modifydish=(id)=>{
        router.push({
            path:'modifydish',
            query: {
                dishid: id
            }
        })
    }
    const openDetail=(orderId)=>{
        console.log("orderId")
        console.log(orderId)

        axios.get("api/merchant/getOrderDish",{
            params:{
                orderId:orderId
            }
        }).then(response=>{

            dialogVisible.value=true;
            console.log("查询结果")
            console.log(response)
            arrDish=response.data.data
        })
    }
    const beginDateChange=()=>{
        orderRequest.beginDate=new Date(beginTime.value).format("yyyy-MM-dd")
    }
    const endDateChange=()=>{
        orderRequest.endDate=new Date(endTime.value).format("yyyy-MM-dd")
    }
    const handleCurrentChange=(val)=>{
        pageNum.value=val;
        orderRequest.pageNum=val;
        axios.post("api/merchant/getOrderWith",orderRequest).then(
            res=>{
                tableData.value=res.data.data.list
            }
        )
    }
    searchOrderWith();
</script>


<style scoped>
    .demo-image__error .image-slot {
        font-size: 30px;
    }
    .demo-image__error .image-slot .el-icon {
        font-size: 30px;
    }
    .demo-image__error .el-image {
        width: 100%;
        height: 200px;
    }
</style>



<style>


</style>